<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>{$data['title']}</title>
    <script src="__SITEURL__/../jquery/jquery-3.7.0.min.js" type="text/javascript"></script>
    <!-- https://echarts.apache.org/examples/zh/index.html -->
    <script src="__SITEURL__/../jquery/echarts.min.js" type="text/javascript"></script>
    <style>
        body {
            background-color: #f1f1f1;
            padding-bottom: 50px;
            margin: 1em;
            line-height: 1.8em;
        }

        .right {
            text-align: right;
        }

        .left {
            text-align: left;
        }

        .nowrap {
            white-space: nowrap;
        }

        /* 上部按钮 */
        .tool-bar {
            border-bottom: 1px #ddd solid;
            padding: 0.5em;
            text-align: center;
        }

        #print-btn {
            width: 120px;
            padding: 0.5em;
            border: 0;
            text-align: center;
            background-color: #0080ff;
            color: #ffffff;
            border-radius: 4px;
            cursor: pointer;
            margin: auto;
        }

        #print-btn:hover {
            background-color: #0078ff;
        }

        /* 报告内容 */
        .wrapper {
            margin: auto;
            max-width: 1400px;
        }

        .content {
            box-sizing: border-box;
            background-color: #FFFFFF;
            border: 1px #dddddd solid;
            border-radius: 15px;
            max-width: 800px;
            padding: 2em;
        }

        #print-body {
            width: 100%;
            margin-top: 1em;
        }

        #print-body h2 {
            text-align: center;
            font-size: 1.5em;
            color: #333333;
        }

        #print-body h3 {
            text-align: center;
            font-size: 1.2em;
            color: #333333;
            line-height: 1.8em;
            /* margin-top: 2em; */
        }

        #print-body h5 {
            text-align: center;
            font-size: 1em;
            color: #333333;
            line-height: 1.5em;
            margin-top: 1em;
        }

        #print-body h6 {
            text-align: center;
            font-size: 0.8em;
            color: #333333;
            line-height: 1.3em;
            margin-top: 1em;
        }

        #print-body .top_info {
            font-size: 1em;
            margin: 1.5em auto;
            display: flex;
            flex-wrap: wrap;
            width: 80%;
            justify-content: space-between;
        }

        #print-body .top_info div {
            font-size: 1em;
            min-width: 25%;
        }

        #print-body p {
            text-indent: 2em;
            font-size: 1em;
            margin-block-end: 0;
            margin-block-start: 0;
        }

        .report-list {
            box-sizing: border-box;
            width: 100%;
            padding: 0;
            font-size: 1em;
        }

        .factor {
            list-style-type: none;
            /* padding: 10px 8px; */
            margin: 0;
            /* border-bottom: 1px #ddd solid; */
        }

        .result_msg {
            font-size: 0.9em;
        }

        .report-list .factor:last-child {
            border-bottom: 0;
        }

        .qr_img_list {
            text-align: center;
            display: flex;
            flex-wrap: wrap;
        }

        .qr_img_list div {
            flex: 1;
        }

        .qr_img_list {
            margin: 4em auto;
        }

        .qr_img_list div img {
            display: block;
            margin: auto;
            width: 10rem;
            height: 10rem;
        }

        @media screen and (max-device-width: 1242px) {
            .tool-bar {
                display: none;
            }
        }

        @media print {
            .tool-bar {
                display: none;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper content" id="print-body">
        <!-- 上部按钮 -->
        <div class="tool-bar">
            <div id="print-btn">打印或下载</div>
        </div>
        <!-- 报告内容 -->
        <div>
            <!-- 分段问答 -->
            {if $includeFile == 'show_fdpj_person' }
            {include file="report/show_fdpj_person" /}
            {elseif $includeFile == 'show_fdpj_team' }
            {include file="report/show_fdpj_team" /}

            <!-- 选项数量 -->
            {elseif $includeFile == 'show_xxsl_person' }
            {include file="report/show_xxsl_person" /}
            {elseif $includeFile == 'show_xxsl_team' }
            {include file="report/show_xxsl_team" /}

            <!-- 因子最高 -->
            {elseif $includeFile == 'show_yzzg_person' }
            {include file="report/show_yzzg_person" /}
            {elseif $includeFile == 'show_yzzg_team' }
            {include file="report/show_yzzg_team" /}

            <!-- 明尼苏达多相个性测验(MMPI) -->
            {elseif $includeFile == 'show_mmpi_person' }
            {include file="report/show_mmpi_person" /}
            {elseif $includeFile == 'show_mmpi_team' }
            {include file="report/show_mmpi_team" /}

            <!-- 匹兹堡睡眠质量指数(PSQI) -->
            {elseif $includeFile == 'show_psqi_person' }
            {include file="report/show_psqi_person" /}
            {elseif $includeFile == 'show_psqi_team' }
            {include file="report/show_psqi_team" /}

            {/if}
        </div>
    </div>
</body>
<script>
    $(function () {
        // alert(window.print);
        // $("#print-btn").html(window.print.toString());
        // if (window.print) {
        // var browser = "";
        // if (window.ActiveXObject) {
        //     browser = "IE";
        // } else if (document.getBoxObjectFor) { //只有火狐有
        //     browser = "Firefox";
        // } else if (window.MessageEvent && !document.getBoxObjectFor) {
        //     browser = "Chrome";
        // } else if (window.opera) {
        //     browser = "Opera";
        // } else if (window.openDatebase) {
        //     browser = "Safari";
        // }

        // browser = getBrowserType();
        // $("#print-btn").html(browser);

        // if (window.print && (browser == "Firefox" || browser == "Chrome" || browser == "Safari")) {
        // $(".tool-bar").show();
        $("#print-btn").click(function () {
            window.print();
        });
        // } else {
        //     // $(".tool-bar").hide();
        // }
    });

    function getBrowserType() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var browser = 'unknown';

        if (userAgent.indexOf("IE") != -1) { //字符串含有IE字段，表明是IE浏览器
            browser = "IE";
        } else if (userAgent.indexOf('Firefox') != -1) { //字符串含有Firefox字段，表明是火狐浏览器
            browser = "Firefox";
        } else if (userAgent.indexOf('OPR') != -1) { //Opera
            browser = "Opera";
        } else if (userAgent.indexOf('Chrome') != -1) { //Chrome
            browser = "Chrome";
        } else if (userAgent.indexOf('Safari') != -1) { //Safari
            browser = "Safari";
        } else if (userAgent.indexOf('Trident') != -1) { //IE内核
            browser = 'IE 11';
        }

        return browser;
    }
</script>

</html>